<template>
  <div :class="props.element.className || 'base-map'" style="overflow: hidden">
    <canvas ref="canvasRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { debounce } from "@pureadmin/utils";
import { downloadPic } from "@visual/api/api";
import * as placeholderUrl from "@visual/assets/placeholder.jpg";

const props = defineProps(["propValue", "element"]);
const emits = defineEmits(["generalEvent", "editorEvent"]);
const canvasRef = ref();
const canvasCtx = ref();
const shouldDraw = ref(true);
const img = ref();

watch(() => props.element.style.width, drawImage);
watch(() => props.element.style.height, drawImage);
watch(() => props.propValue.flip.vertical, mirrorFlip);
watch(() => props.propValue.flip.horizontal, mirrorFlip);
watch(() => props.propValue.url, debounce(urlDrawImageAgain, 500));
watch(() => props.propValue.name, debounce(nameDrawImageAgain, 500));

function drawImage({ placeholder = null, url = null }) {
  const { width, height } = props.element.style;
  canvasRef.value.width = width;
  canvasRef.value.height = height;
  if (shouldDraw.value) {
    shouldDraw.value = false;
    img.value = new Image();
    if (!url) img.value.src = placeholder || !props.propValue.url ? placeholderUrl.default : props.propValue.url;
    else img.value.src = url;
    img.value.onload = () => {
      canvasCtx.value.drawImage(img.value, 0, 0, width, height);
      mirrorFlip();
    };
  } else {
    mirrorFlip();
  }
}
function urlDrawImageAgain({ url = null }) {
  clearImageCtx();
  drawImage({ url });
}
async function getImageByName() {
  if (!props.propValue.name) return;
  let res = await downloadPic({ originalName: props.propValue.name, moduleName: "twins_visualization" });
  if (res && res[0]) {
    const { fileUrl } = res[0];
    urlDrawImageAgain({ url: fileUrl });
  } else {
    setDefault();
  }
  console.log(res);
}
async function nameDrawImageAgain() {
  if (!props.propValue.name) return;
  let res = await downloadPic({ originalName: props.propValue.name, moduleName: "twins_visualization" });
  if (res && res[0]) {
    const { fileUrl } = res[0];
    emitEditorEvent({ cKey: "url", cVal: fileUrl });
    emitEditorEvent({ oKey: "style", cVal: { width: props.element.style.width || 800, height: props.element.style.height || 800, top: 0, left: 0 } });
    emitEditorEvent({ oKey: "isLock", cVal: true });

    urlDrawImageAgain({});
  } else {
    setDefault();
  }
  console.log(res);
}
function setDefault() {
  drawImage({ placeholder: "placeholder" });
  emitEditorEvent({ cKey: "url", cVal: placeholderUrl });
}
function emitEditorEvent({ oKey = "propValue", cKey = null, cVal }) {
  emits("editorEvent", { oKey, cKey, cVal, id: props.element.id });
}
function clearImageCtx() {
  shouldDraw.value = true;
  const { width, height } = props.element.style;
  canvasCtx.value.clearRect(0, 0, width, height);
}
function mirrorFlip() {
  const { vertical, horizontal } = props.propValue.flip;
  const { width, height } = props.element.style;
  const hvalue = horizontal ? -1 : 1;
  const vValue = vertical ? -1 : 1;

  // 清除图片
  canvasCtx.value.clearRect(0, 0, width, height);
  // 平移图片
  canvasCtx.value.translate(width / 2 - (width * hvalue) / 2, height / 2 - (height * vValue) / 2);
  // 对称镜像
  canvasCtx.value.scale(hvalue, vValue);
  canvasCtx.value.drawImage(img.value, 0, 0, width, height);
  // 还原坐标点
  canvasCtx.value.setTransform(1, 0, 0, 1, 0, 0);
}

onMounted(() => {
  canvasCtx.value = canvasRef.value.getContext("2d");
  // drawImage({});
  getImageByName();
});
</script>
